<template>
  <div class="m-detail-formitem">
    <template v-for="({ title, hide, children, column = 2 }, index) in data">
      <div class="descriptions" v-if="!hide" :key="index">
        <div class="descriptions-title">
          {{ title }}
        </div>
        <div class="descriptions-view" v-if="children && children.length">
          <Row :wrap="true" :gutter="[20, 12]">
            <template
              v-for="(
                {
                  label,
                  content,
                  span = 1,
                  props,
                  type = '',
                  hide = false,
                  layout = 'horizontal',
                },
                i
              ) in children"
            >
              <Col :span="(24 / column) * span" v-if="!hide" :key="i">
                <div
                  class="descriptions-item"
                  :style="{
                    display: layout === 'horizontal' ? 'flex' : 'block',
                  }"
                >
                  <div class="label">{{ label ? label + "：" : "" }}</div>
                  <div
                    class="content"
                    :style="{
                      marginTop: layout === 'horizontal' ? '0' : '12px',
                    }"
                  >
                    <slot :name="type">
                      <component
                        :is="isComponent(content, type)"
                        v-bind="{ ...props }"
                        v-if="isComponent(content, type)"
                      ></component>
                      <span v-else>{{ content || "" }}</span>
                    </slot>
                  </div>
                </div>
              </Col>
            </template>
          </Row>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { Row, Col } from "ant-design-vue";
import getComponent from "./getComponent.js";

export default {
  name: "m-formdetailitem",
  props: ["data"],
  components: { Row, Col },
  methods: {
    isComponent(component, type) {
      return getComponent(component, type);
    },
  },
};
</script>

<style scoped lang="less">
.m-detail-formitem {
  background: #f6f6f6;
  .descriptions {
    background: #fff;
    border-radius: 4px;
    padding: 20px 21px;
    &:not(:first-child) {
      margin-top: 12px;
    }
    .descriptions-title {
      font-size: 12px;
      color: #333333;
      letter-spacing: 0;
      font-weight: 500;
      height: 20px;
      line-height: 20px;
      margin-bottom: 12px;
      &::before {
        content: "";
        display: inline-block;
        background: #0176f6;
        border-radius: 1px;
        width: 8px;
        height: 8px;
        margin-right: 8px;
        line-height: 20px;
        font-size: 0;
      }
    }

    .descriptions-view {
      .descriptions-item {
        display: flex;
      }
      .label {
        flex-shrink: 0;
        font-size: 12px;
        color: #666666;
        line-height: 20px;
        font-weight: 400;
      }
      .content {
        font-size: 12px;
        color: #333333;
        line-height: 20px;
        font-weight: 400;
      }
    }
  }
}
</style>
